<template>
	<!--修改用户信息的页面-->

	<view class="content">
		<!-- <view class="userIcon">
			<image src="../../static/head.png"></image>
		</view> -->
		<QSInput :name="name" variableName="userName" title="账号" v-model="form.userName" titleLayout="left" itemDisabled="true"></QSInput>
		<QSInput :name="name" variableName="phoneNum" title="手机号" leftIcon="phone" v-model="form.phoneNum" verifyType="Tel" required titleLayout="left"></QSInput>
		<QSInput :name="name" variableName="fullName" title="姓名" v-model="form.fullName" titleLayout="left" required></QSInput>
		<QSRadio :name="name" variableName="vetGender" title="性别" v-model="form.vetGender" :itemArray="radio_itemArray"
		 titleLayout="left" contentStyle="margin-right: 36%;" required></QSRadio>
		 <QSInput :name="name" variableName="roleName" title="角色" v-model="form.roleName[0]" itemDisabled="true" titleLayout="left"></QSInput>
		 
		<QSInput :name="name" variableName="institutionName"  title="监督所" v-model="institutionName" titleLayout="left" itemDisabled="true"></QSInput>
		
		 <QSInput :name="name" variableName="vetNumber" title="证件号" v-model="form.vetNumber" titleLayout="left" required></QSInput>
		 
		<!-- <QSPics ref="pics" name="pics" variableName="pics" title="电子签名" v-model="picsData" @change="uploadChange" ></QSPics> -->
		<view style="padding: 3% 4%;position: relative;">
			<view style="float: left;width: 25%;padding: 1.5% 2%;">电子签名</view>
			<view style="float: left;width: 65%;padding: 1.5% 2%;">
				<!-- <image src="../../static/del.png"  style="width: 20px;height: 20px;position: absolute;right: 2%;" @click="delImage"></imag
				e> -->
				<image src="../../static/tjtp.png" style="width: 150px;height: 50px;" mode="aspectFit" @click="uploadSignature"  v-if="form.signature==null"></image>
				<image :src="form.signature" style="width: 55%;height: 50px;" v-if="form.signature!=null"></image>
				<uni-icons type="clear" size="20" style="position: absolute;right: 10.2%;" color="#999;" @click="delImage" v-if="form.signature!=null"></uni-icons>
			</view>
		</view>
			<!-- <button type="primary" @tap="getPics">上传图片</button> -->
		<view style="margin-top: 10%;">
			<button type="primary" @tap="updateAcount">保存</button>
		</view>
	</view>
</template>

<script>
	import QSApp from '@/components/QS-inputs-split/js/app.js';
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {
		mapState,
	} from 'vuex'
	import loginjs from '@/login.js'
	export default {
		computed: mapState([, 'baseUrl']),
		 components: {uniIcons},
		data() {
			return {
				name:'acount',
				form: {
					userName: '',
					fullName: '',
					vetGender: '',
					phoneNum:'' ,
					vetNumber: '',
					roleName:[],
					signature:''
				},
				institutionName:'',
				picsData: [{title: '', required: true,"path": ""}],
				//gender:null,
				Authorization: null,
				uid: null,
				radio_itemArray: [{
						name: '男',
						value: 1,
					},
					{
						name: '女', 
						value: 2
					}
				],
				//所属机构
				organizaList: [],
			}
		},



		methods: {
			delImage(){
				this.form.signature=null
			},
			uploadSignature(){
				uni.chooseImage({
					count:1,
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths[0];
						uni.uploadFile({
						           url: this.baseUrl + 'api/upload',  //仅为示例，非真实的接口地址
						            filePath:tempFilePaths,
						            name: 'file',
						            success: (uploadFileRes) => {
										 var result = JSON.parse(uploadFileRes.data);
										  if (result.state = "SUCCESS") {
											this.form.signature=result.url  
										}
						            }
						        });
						} })
					
			},
			/* 选择的性别 */
			radioChange(evt) {
				this.user.vetGender = evt.target.value
			},
			onReady() {
				//从本地存储中获取用户id
				/* */
				//检测用户是否登录
				var uNameAndAuth = loginjs.checkLogin()
				//用户名和认证信息的组合
				if (uNameAndAuth == null) {
					return
				}
				uNameAndAuth = uNameAndAuth.split("/")
				this.user = uNameAndAuth[0]
				this.Authorization = uNameAndAuth[1]
				this.uid = uni.getStorageSync("jaUserId");
				/* 根据用户id查询用户信息并回显 */
				this.getUserDetail()
			},
			
			getUserDetail() {
				uni.request({
					url: this.baseUrl + "api/system/sysUser/" + this.uid,
					method: "GET",
					header: {
						"Authorization": this.Authorization,
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.form = res.data.data
							this.picsData[0].path=this.form.signature
							this.getorganizaList()
						} else {
							uni.showToast({
								title: "获取用户信息失败",
								icon: "none",
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "获取用户信息失败",
							icon: "none",
							duration: 2000
						})
					}
				})
			},
			getorganizaList() {
							uni.request({
								url: this.baseUrl + "api/institution/all",
								method: "GET",
								header: {
									"Authorization": this.Authorization,
								},
								success: (res) => {
									if (res.data.code == 200) {
										this.organizaList = res.data.data
										this.organizaList.forEach(data=>{
											if(data.id==this.form.organizationId){
												this.institutionName=data.institutionName
											}
										})
									}
								}
							})
			            },
			/* 修改用户信息 */
			updateAcount() {
				if(!(/^[1][0-9]{10}$/.test(this.form.phoneNum))){
					QSApp.showToast('手机号格式有误');
					return
				}else if(!this.form.fullName||!this.form.vetGender||!this.form.vetNumber){
					QSApp.showToast('请完善表单信息');
					return
				}
				uni.showLoading({
					title: "正在提交..."
				})
				uni.request({
					url: this.baseUrl + "api/system/sysUser/my",
					method: "PUT",
					data: JSON.stringify(this.form),
					header: {
						"Authorization": this.Authorization,
					},
					success: (res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "修改信息成功",
								icon: "none",
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "修改信息失败",
								icon: "none",
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "修改信息失败",
							icon: "none",
							duration: 2000
						})
					}
				})
			}

		}

	}
</script>

<style>
	.userIcon {
		width: 64px;
		height: 64px;
		border-radius: 50%;

		border: 1px solid #007AFF;
	}
	
 
	input {
		font-size: 10px;
		/* border: 1px solid #0A98D5; */
		/* width: 50%; */
		height: 30px;
		/* border-bottom: 1px solid #007BFA; */
	}
	

</style>
